<template>
    <div>
        <div class="tabbar">
            <div class="wrap tabbarWarp">
                <div class="left">欢迎来到叩丁狼积分商城</div>
                <ul class="right">
                    <li>
                        <img :src="userInfo.headImg" alt width="23px" />
                        用户名:{{userInfo.nickName}}
                    </li>
                    <li>我的积分:{{userInfo.coin}}</li>
                    <li>获取积分</li>
                    <li>叩丁狼官网</li>

                    <li class="cart-btn" v-if="isLogined">
                        <img src="../assets/img/cart.png" alt />
                        <span>购物车</span>
                        <strong>{{cartTotal}}</strong>
                    </li>
                    <li class="login-btn" v-else @click="changeIsShowLoginModal(true)">登录</li>
                </ul>
            </div>
        </div>
    </div>
</template>
  
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { weixinLoginApi } from "@/request/api";
export default {
    /* 
        1. 在vuex中增加是否登录的状态
        2. 在topbar中增加购物车按钮
        3. 获取vuex中的 isLogined 来控制是否显示购物车按钮
        4. 在login.vue中 登录成功狗 调用ChangeIslogined 将isLogined变成true
    */
    data() {
        return {};
    },
    created() {
        // 获取地址栏的code
        // console.log(this.$route.query.code);
        // 在地址栏拿到 this.$route.query.code  需要时间渲染上去的  所以一行的打印是上面的undefined   onReady    是让他渲染完地址再执行代码
        this.$router.onReady(async () => {
            let code = this.$route.query.code;
            if (code) {
                let res = await weixinLoginApi({
                    code,
                });
                console.log("微信扫码请求", res);
                if (res.code == 0) {
                    // !登录成功
                    this.asyncChangeIsShowToast({
                        isShow: true,
                        title: res.message,
                        type: "success",
                    });
                    // 2.保存token
                    localStorage.setItem("x-auth-token", res["x-auth-token"]);
                    // 3.关闭登录框
                    this.changeIsShowLoginModal(false);
                    // 4.登陆状态按钮更换
                    this.changeIsLogined(true);
                    this.asyncChangeUserInfo();
                    // 删除uuid
                    localStorage.removeItem("uuid");
                    // 删除地址栏中的code
                    this.$router.push(this.$route.path);
                } else if (res.code == 407) {
                    // !第一次登陆还没关联手机号
                    // 1. 提示用户再用手机号登陆一次
                    // console.log(407);
                    this.asyncChangeIsShowToast({
                        isShow: true,
                        title: res.message,
                        type: "danger",
                    });
                    // 2. 弹出登录框
                    this.changeIsShowLoginModal(true);
                    // 3. 存储uuid
                    localStorage.setItem("uuid", res.uuid);
                } else if (res.code == 400) {
                    // alert(res.message);
                    // console.log(400);
                    //! 二维码过期
                    this.asyncChangeIsShowToast({
                        isShow: true,
                        title: res.message,
                        type: "danger",
                    });
                    this.changeIsShowLoginModal(true);
                }
            } else {
                // 没有code 的值时,就是普通得切换
                let mytoken = localStorage.getItem("x-auth-token");
                this.changeIsLogined(Boolean(mytoken));
                if (mytoken) {
                    this.asyncChangeUserInfo();
                } else {
                    this.changeReductionUserInfo();
                }
            }
        });
    },
    computed: {
        ...mapState({
            isShowLoginModal: (state) => state.hdIsShowModal.isShowLoginModal,
            isLogined: (state) => state.loginStatus.isLogined,
            userInfo: (state) => state.userInfo.userInfo,
            cartTotal: (state) => state.userInfo.cartTotal,
        }),
    },
    methods: {
        ...mapMutations({
            changeIsShowLoginModal: "hdIsShowModal/changeIsShowLoginModal",
            changeIsShowToast: "showToast/changeIsShowToast",
            changeIsLogined: "loginStatus/changeIsLogined",
            changeUserInfo: "userInfo/changeUserInfo",
            // 还原用户信息
            changeReductionUserInfo: "userInfo/changeReductionUserInfo",
        }),
        ...mapActions({
            asyncChangeIsShowToast: "showToast/asyncChangeIsShowToast",
            asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
        }),
    },
    // 方式一
    // watch: {
    //     "$route.path": {
    //         handler(newVal, oldVal) {
    //             let mytkoen = localStorage.getItem("x-auth-token");
    //             this.changeIsLogined(Boolean(mytkoen));
    //         },
    //     },
    // },
    // 方式二  组件重载
};
</script>

<style lang="less" scoped>
.tabbar {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #242b39;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
}
.tabbarWarp {
    display: flex;
    justify-content: space-between;
    .right {
        display: flex;
        justify-content: space-between;
        li {
            margin-left: 20px;
            img {
                border-radius: 50%;
                vertical-align: middle;
            }
            &.login-btn {
                width: 124px;
                height: 40px;
                background: #0a328e;
                text-align: center;
                span {
                    background-color: #00ffe5;
                }
            }
            &.cart-btn {
                width: 124px;
                height: 40px;
                background: #0a328e;
                text-align: center;
                img {
                    width: 20px;
                    height: 19px;
                    vertical-align: middle;
                }
                span {
                    margin: 0 8px;
                }
                strong {
                    width: 22px;
                    height: 22px;
                    line-height: 22px;
                    display: inline-block;
                    border-radius: 50%;
                    background-color: #fd604d;
                }
            }
        }
    }
}
</style>
